<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RateExchange</title>
    <script src="Vue.js"></script>

    <style>
        div {
            margin: 5px auto;
            /*margin-left: 100px;*/
            align-self: center;
            width: 500px;
        }

        table {
            width: 500px;
            border: 1px black solid;
            padding: 1px;
        }

        th, td {
            height: 35px;
            text-align: center;
            border: 1px black solid;
        }

        #headtext {
            background: #ff7676;
        }
    </style>
</head>
<body>
<div id="root">
    <div>
        <select v-model="leftIndex">
            <option v-for="(a,index) in moneyList" :key="index" :value="index">{{a}}</option>
        </select>
        <input type="submit" value="互换" @click="exchangeMoney">
        <select v-model="rightIndex">
            <option v-for="(a,index) in moneyList" :key="index" :value="index">{{a}}</option>
        </select>
        数额:
        <input type="text" placeholder="100" v-model="userInputValue">
        <input type="submit" value="汇率转换" @click="calMoney">
    </div>
    <div>
        <table>
            <tr>
                <th colspan="3" id="headtext">按当前汇率兑换结果</th>
            </tr>
            <tr>
                <td>{{tableLeft1}}</td>
                <td>汇率</td>
                <td>{{tableRight1}}</td>
            </tr>
            <tr>
                <td>{{tableLeft2}}</td>
                <td>{{rate}}</td>
                <td>{{tableRight2}}</td>
            </tr>

        </table>
    </div>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
            moneyList:['美元', '欧元', '日元', '港元', '韩元', '比特币'],
            rateList:[1, 0.9, 100, 8, 1000, 0.000016],
            leftIndex:'0',
            rightIndex:'1',
            tableLeft1:'美元',
            tableRight1:'欧元',
            tableLeft2:'100',
            tableRight2:'90',
            rate:'0.9',
            userInputValue:''
        },
        methods:{
            exchangeMoney:function () {
                var temp = this.leftIndex;
                this.leftIndex = this.rightIndex;
                this.rightIndex = temp;
            },
            calMoney:function () {
                this.tableLeft1 = this.moneyList[this.leftIndex];
                this.tableRight1 = this.moneyList[this.rightIndex];
                this.rate = this.rateList[this.rightIndex]/this.rateList[this.leftIndex];
                if (this.userInputValue=='')  this.userInputValue='100';
                this.tableLeft2 = this.userInputValue;
                this.tableRight2 = this.userInputValue * this.rate;
                this.userInputValue = ''
            }
        },
        watch:{
            leftIndex:function () {

            },
            rightIndex:function () {

            }
        }
    })
</script>
</body>
</html>